<template>
  <view class="app">
    <view class="price-box">
      <text>支付金额</text>
      <text class="price">
        {{ price / 100.0 }}
      </text>
    </view>

    <view class="pay-type-list">
      <!-- #ifdef MP-WEIXIN | APP-PLUS || H5 -->
      <view class="type-item b-b" @click="changePayType('WX')">
        <text class="icon yticon icon-weixinzhifu" />
        <view class="con">
          <text class="tit">
            微信支付
          </text>
          <text>推荐使用微信支付</text>
        </view>
        <label class="radio">
          <radio :checked="payType == 'WX'" value="WX" color="#fa436a" />
        </label>
      </view>
      <!-- #endif -->
      <!-- #ifdef MP-ALIPAY | APP-PLUS -->
      <view class="type-item b-b" @click="changePayType('ALI')">
        <text class="icon yticon icon-alipay" />
        <view class="con">
          <text class="tit">
            支付宝
          </text>
        </view>
        <label class="radio">
          <radio :checked="payType == 'ALI'" value="ALI" color="#fa436a" />
        </label>
      </view>
      <!-- #endif -->
      <view class="type-item" @click="changePayType('OFFLINE')">
        <text class="icon yticon icon-erjiye-yucunkuan" />
        <view class="con">
          <text class="tit">
            线下支付（到付）
          </text>
        </view>
        <label class="radio">
          <radio :checked="payType == 'OFFLINE'" value="OFFLINE" color="#fa436a" />
        </label>
      </view>
    </view>

    <text :disabled="submiting" class="mix-btn" @click="confirm">
      确认支付
    </text>
  </view>
</template>

<script>
const PLATFORM_APP = 1
const PLATFORM_MP = 3
const PLATFORM_WAP = 5
export default {
  data() {
    return {
      payType: '',
      price: 0,
      orderNo: '',
      parentOrderNo: '',
      submiting: false,
      type: 'order',
      templateId: ''
    }
  },
  onLoad(options) {
    // #ifdef MP-WEIXIN
    this.payType = 'WX'
    // #endif
    // #ifdef MP-ALIPAY
    this.payType = 'ALI'
    // #endif
    // #ifdef APP-PLUS
    this.payType = 'WX'
    // #endif
    // #ifdef H5
    this.payType = 'WX'
    // #endif
    if (options.type) {
      this.type = options.type
    }
    if (this.type === 'order') {
      this.price = options.price
      if (options.orderno) {
        this.orderNo = options.orderno
      } else {
        this.parentOrderNo = options.parentorderno
      }
    } else if (this.type === 'vip') {
      this.templateId = options.templateid
      this.price = options.price
    }
  },

  methods: {
    // 选择支付方式
    changePayType(type) {
      this.payType = type
    },
    // 确认支付
    confirm: async function() {
      const that = this
      let platform = ''
      // #ifdef MP-WEIXIN
      platform = PLATFORM_MP
      // #endif
      // #ifdef MP-ALIPAY
      platform = PLATFORM_MP
      // #endif
      // #ifdef APP-PLUS
      platform = PLATFORM_APP
      // #endif
      // #ifdef H5
      platform = PLATFORM_WAP
      // #endif
      // 判断是vip支付，还是order支付
      if (this.type === 'order') {
        if (that.payType === 'WX') {
          that.submiting = true
          that.$api.request('order', 'prepay', {
            orderNo: that.orderNo,
            parentOrderNo: that.parentOrderNo,
            platform: platform,
            payChannel: 'WX'
          }, failres => {
            that.submiting = false
            that.$api.msg(failres.errmsg)
          }).then(prepayRes => {
            that.submiting = false
            let payParam
            // #ifdef MP-WEIXIN
            payParam = {
              appId: prepayRes.data.appId,
              nonceStr: prepayRes.data.nonceStr,
              package: prepayRes.data.packageValue,
              timeStamp: prepayRes.data.timeStamp,
              signType: prepayRes.data.signType,
              paySign: prepayRes.data.paySign
            }
            // #endif
            // #ifdef APP-PLUS
            payParam = {
              appid: prepayRes.data.appId,
              noncestr: prepayRes.data.nonceStr,
              package: prepayRes.data.packageValue,
              partnerid: prepayRes.data.partnerId,
              prepayid: prepayRes.data.prepayId,
              timestamp: parseInt(prepayRes.data.timeStamp),
              sign: prepayRes.data.sign,
              signType: 'MD5'
            }
            // #endif
            // #ifdef MP-WEIXIN || APP-PLUS
            uni.requestPayment({
              provider: 'wxpay',
              // #ifdef MP-WEIXIN
              ...payParam,
              // #endif
              // #ifdef APP-PLUS
              orderInfo: payParam,
              // #endif
              success: function(res) {
                uni.redirectTo({
                  url: '/pages/pay/success'
                })
              },
              fail: function(res) {
                console.log('支付过程失败:' + JSON.stringify(res))
                that.$api.msg('支付取消')
              },
              complete: function(res) {
                console.log('支付过程结束')
              }
            })
            // #endif
            // #ifdef H5
            that.$jweixin.chooseWXPay({
              nonceStr: prepayRes.data.nonceStr,
              timestamp: prepayRes.data.timeStamp,
              package: prepayRes.data.packageValue,
              signType: prepayRes.data.signType,
              paySign: prepayRes.data.paySign,
              success: (e) => {
                // 支付成功
                uni.redirectTo({
                  url: '/pages/pay/success'
                })
              },
              fail: function(res) {
                console.log('支付过程失败:' + JSON.stringify(res))
                that.$api.msg('支付取消')
              },
              complete: function(res) {
                console.log('支付过程结束')
              }
            })
            // #endif
          })
        } else if (that.payType === 'ALI') {
          that.submiting = true
          that.$api.request('order', 'prepay', {
            orderNo: that.orderNo,
            parentOrderNo: that.parentOrderNo,
            platform: platform,
            payChannel: 'ALI'
          }, failres => {
            that.submiting = false
            that.$api.msg(failres.errmsg)
          }).then(prepayRes => {
            that.submiting = false
            // #ifdef MP-ALIPAY
            if (prepayRes.data.code === '10000') {
              const payParam = JSON.parse(prepayRes.data.httpBody).alipay_trade_create_response.trade_no
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: payParam,
                success: function(res) {
                  uni.redirectTo({
                    url: '/pages/pay/success'
                  })
                },
                fail: function(res) {
                  that.$api.msg('支付取消')
                },
                complete: function(res) {
                  console.log('支付过程结束')
                }
              })
            } else {
              that.$api.msg(prepayRes.data.subMsg)
            }
            // #endif
            // #ifdef APP-PLUS
            uni.requestPayment({
              provider: 'alipay',
              orderInfo: prepayRes.data,
              success: function(res) {
                uni.redirectTo({
                  url: '/pages/pay/success'
                })
              },
              fail: function(res) {
                that.$api.msg('支付取消')
                console.log(res)
              },
              complete: function(res) {
                console.log('支付过程结束')
              }
            })
            // #endif
          })
        } else if (that.payType === 'OFFLINE') {
          that.submiting = true
          that.$api.request('order', 'offlinePrepay', {
            parentOrderNo: that.parentOrderNo,
            orderNo: that.orderNo,
            platform: platform
          }, failres => {
            that.submiting = false
            that.$api.msg(failres.errmsg)
          }).then(res => {
            uni.redirectTo({
              url: '/pages/pay/success'
            })
          })
        }
      } else if (this.type === 'vip') {
        if (that.payType === 'WX') {
          that.submiting = true
          that.$api.request('vip.order', 'prepay', {
            templateId: that.templateId,
            payPlatform: platform,
            payChannel: 'WX'
          }, failres => {
            that.submiting = false
            that.$api.msg(failres.errmsg)
          }).then(prepayRes => {
            that.submiting = false
            let payParam
            // #ifdef MP-WEIXIN
            payParam = {
              appId: prepayRes.data.appId,
              nonceStr: prepayRes.data.nonceStr,
              package: prepayRes.data.packageValue,
              timeStamp: prepayRes.data.timeStamp,
              signType: prepayRes.data.signType,
              paySign: prepayRes.data.paySign
            }
            // #endif
            // #ifdef APP-PLUS
            payParam = {
              appid: prepayRes.data.appId,
              noncestr: prepayRes.data.nonceStr,
              package: prepayRes.data.packageValue,
              partnerid: prepayRes.data.partnerId,
              prepayid: prepayRes.data.prepayId,
              timestamp: parseInt(prepayRes.data.timeStamp),
              sign: prepayRes.data.sign,
              signType: 'MD5'
            }
            // #endif
            // #ifdef MP-WEIXIN || APP-PLUS
            uni.requestPayment({
              provider: 'wxpay',
              // #ifdef MP-WEIXIN
              ...payParam,
              // #endif
              // #ifdef APP-PLUS
              orderInfo: payParam,
              // #endif
              success: function(res) {
                uni.redirectTo({
                  url: '/pages/pay/success?scene=vip'
                })
              },
              fail: function(res) {
                console.log('支付过程失败:' + JSON.stringify(res))
                that.$api.msg('支付取消')
              },
              complete: function(res) {
                console.log('支付过程结束')
              }
            })
            // #endif
            // #ifdef H5
            that.$jweixin.chooseWXPay({
              nonceStr: prepayRes.data.nonceStr,
              timestamp: prepayRes.data.timeStamp,
              package: prepayRes.data.packageValue,
              signType: prepayRes.data.signType,
              paySign: prepayRes.data.paySign,
              success: (e) => {
                // 支付成功
                that.$api.msg('支付成功')
                uni.redirectTo({
                  url: '/pages/pay/success?scene=vip'
                })
              },
              fail: function(res) {
                console.log('支付过程失败:' + JSON.stringify(res))
                that.$api.msg('支付取消')
              },
              complete: function(res) {
                console.log('支付过程结束')
              }
            })
            // #endif
          })
        } else if (that.payType === 'ALI') {
          that.submiting = true
          that.$api.request('order', 'prepay', {
            orderNo: that.orderNo,
            parentOrderNo: that.parentOrderNo,
            platform: platform,
            payChannel: 'ALI'
          }, failres => {
            that.submiting = false
            that.$api.msg(failres.errmsg)
          }).then(prepayRes => {
            that.submiting = false
            // #ifdef MP-ALIPAY
            if (prepayRes.data.code === '10000') {
              const payParam = JSON.parse(prepayRes.data.httpBody).alipay_trade_create_response.trade_no
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: payParam,
                success: function(res) {
                  that.$api.msg('支付成功')
                  uni.redirectTo({
                    url: '/pages/pay/success?scene=vip'
                  })
                },
                fail: function(res) {
                  that.$api.msg('支付取消')
                },
                complete: function(res) {
                  console.log('支付过程结束')
                }
              })
            } else {
              that.$api.msg(prepayRes.data.subMsg)
            }
            // #endif
            // #ifdef APP-PLUS
            uni.requestPayment({
              provider: 'alipay',
              orderInfo: prepayRes.data,
              success: function(res) {
                that.$api.msg('支付成功')
                uni.navigateBack()
              },
              fail: function(res) {
                that.$api.msg('支付取消')
              },
              complete: function(res) {
                console.log('支付过程结束')
              }
            })
            // #endif
          })
        }
      }
    }
  }
}
</script>

<style lang='scss'>
  .app {
    width: 100%;
  }

  .price-box {
    background-color: #fff;
    height: 265upx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28upx;
    color: #909399;

    .price {
      font-size: 50upx;
      color: #303133;
      margin-top: 12upx;

      &:before {
        content: '￥';
        font-size: 40upx;
      }
    }
  }

  .pay-type-list {
    margin-top: 20upx;
    background-color: #fff;
    padding-left: 60upx;

    .type-item {
      height: 120upx;
      padding: 20upx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 60upx;
      font-size: 30upx;
      position: relative;
    }

    .icon {
      width: 100upx;
      font-size: 52upx;
    }

    .icon-erjiye-yucunkuan {
      color: #fe8e2e;
    }

    .icon-weixinzhifu {
      color: #36cb59;
    }

    .icon-alipay {
      color: #01aaef;
    }

    .tit {
      font-size: $font-lg;
      color: $font-color-dark;
      margin-bottom: 4upx;
    }

    .con {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: $font-sm;
      color: $font-color-light;
    }
  }

  .mix-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 630upx;
    height: 80upx;
    margin: 80upx auto 30upx;
    font-size: $font-lg;
    color: #fff;
    background-color: $base-color;
    border-radius: 10upx;
    box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  }
</style>
